<!--
 * @Description: 悟空软件
 * @Author: 悟空
 * @LastEditors: yang
-->
<template>
  <wb-section :move="false" class="el-card wb-salary" :showFullIcon="false">
    <flexbox class="body">
      <div class="echart">
        <chartPanel title="学历层次统计">
          <div id="eduBar">
            <educationStatist :modelOptions="eduOptions" @click-edu="clickEducation"/>
          </div>
        </chartPanel>
        <chartPanel title="专业技术职位">
          <div id="majorFunnel"/>
        </chartPanel>
        <chartPanel title="技能人才">
          <div id="technologyBar"/>
        </chartPanel>
      </div>
    </flexbox>
  </wb-section>
</template>

<script>
import WbSection from './WbSection'
import WbItem from './WbItem'

import * as echarts from 'echarts'
import chartPanel from "./chartPanel";
import educationStatist from "./educationStatist";
export default {
  // 招聘动态
  name: 'WbEmpTotal',
  components: {
    WbSection,
    WbItem,
    chartPanel,
    educationStatist
  },
  props: {
    totalData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    query: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      majorIndex: 0,
      technologyIndex: 0,
      eduOptions: [{
        label: '博士',
        background: 'linear-gradient( 90deg, #6D39FF 0%, #A382FF 100%)',
        color: '#2759FF',
        value: '',
      }, {
        label: '硕士',
        background: 'linear-gradient( 90deg, #2759FF 0%, #27B1FF 100%)',
        color: '#2759FF',
        value: '',
      }, {
        label: '大学',
        background: '#3990F9',
        color: '#3990F9',
        value: '',
      }, {
        label: '专科',
        background: 'linear-gradient( 82deg, #14C169 0%, #38F996 100%)',
        color: '#20DA7B',
        value: '',
      }, {
        label: '中专',
        background: 'linear-gradient( 90deg, #FDC000 0%, rgba(253,192,0,0) 100%)',
        color: '#FDC000;',
        value: '',
      }, {
        label: '高中及以下',
        background: 'linear-gradient( 90deg, #FC6866 0%, #FFDCDC 100%)',
        color: '#2759FF',
        value: '',
      }],
    }
  },
  computed: {},
  watch: {
    query: {
      handler() {
        this.eduBarInit();
        this.majorFunnelInit();
        this.technologyBarInit();
      },
    }
  },
  created() {
  },
  mounted() {
    let pMountedTimer = window.setInterval(() => {
      if (window.parentMounted) {
        window.clearInterval(pMountedTimer)
        // 下面就可以写子组件想在mounted时执行代码（此时父组件的mounted已经执行完毕）
        this.eduBarInit();
        this.majorFunnelInit();
        this.technologyBarInit();
      }
    }, 500)
  },
  beforeDestroy() {
  },
  methods: {
    clickEducation(eduName) {
      this.$emit('click-edu', eduName)
    },
    getValueOrDefault(value, defaultValue) {
      return (value === null || value === undefined || Number.isNaN(value) || value === '') ? defaultValue : value;
    },
    eduBarInit() {
      let eduData = this.totalData.受教育程度;
      let eduArray = ['学历层级'];
      eduArray.push(this.getValueOrDefault(eduData["博士"], 0));
      eduArray.push(this.getValueOrDefault(eduData["硕士"], 0) + this.getValueOrDefault(eduData["研究生"], 0))
      eduArray.push(this.getValueOrDefault(eduData["本科"], 0) + this.getValueOrDefault(eduData["大学"], 0) + this.getValueOrDefault(eduData["学士"], 0))
      eduArray.push(this.getValueOrDefault(eduData["大专"], 0) + this.getValueOrDefault(eduData["高职"], 0))
      eduArray.push(this.getValueOrDefault(eduData["中专"], 0) + this.getValueOrDefault(eduData["中技"], 0))
      eduArray.push(this.getValueOrDefault(eduData["高中"], 0) + this.getValueOrDefault(eduData["初中"], 0) +
        this.getValueOrDefault(eduData["初中及以下"], 0) +
        this.getValueOrDefault(eduData["技校"], 0) + this.getValueOrDefault(eduData["未填报"], 0) +
        this.getValueOrDefault(eduData["无"], 0) + this.getValueOrDefault(eduData["小学"], 0))
      console.log(eduArray)
      const valArray = eduArray.slice(1)
      const max = Math.floor(Math.max(...valArray) / 0.8)
      valArray.forEach((item, index) => {
        this.$set(this.eduOptions[index], 'value', item)
        let percent = Math.max(Math.floor((item / max) * 100), 2)
        this.$set(this.eduOptions[index], 'percent', percent + '%' )
      })


      // var myChart = echarts.init(document.getElementById('eduBar'))
      // var option = {
      //   // title: {
      //   //   text: '人员结构-学历层次',
      //   //   left: 'center'
      //   // },
      //   tooltip: {
      //     trigger: 'axis',
      //     axisPointer: {
      //       type: 'shadow'
      //     }
      //   },
      //   // legend: {
      //   //   bottom: '5%',
      //   //   left: 'center'
      //   // },
      //   dataset: {
      //     source: [
      //       ['product', '博士研究生', '硕士研究生', '大学', '专科', '中专', '高中及以下'],
      //       eduArray,
      //     ]
      //   },
      //   xAxis: {type: 'category'},
      //   yAxis: {},
      //   series: [
      //     {
      //       type: 'bar',
      //       label: {
      //         normal: {
      //           show: true,//开启显示
      //           position: 'top',//柱形上方
      //           textStyle: { //数值样式
      //             color: 'rgba(0,0,0,0.95)'
      //           }
      //         }
      //       }
      //     }, {
      //       type: 'bar', label: {
      //         normal: {
      //           show: true,//开启显示
      //           position: 'top',//柱形上方
      //           textStyle: { //数值样式
      //             color: 'rgba(0,0,0,0.95)'
      //           }
      //         }
      //       }
      //     }, {
      //       type: 'bar', label: {
      //         normal: {
      //           show: true,//开启显示
      //           position: 'top',//柱形上方
      //           textStyle: { //数值样式
      //             color: 'rgba(0,0,0,0.95)'
      //           }
      //         }
      //       }
      //     }, {
      //       type: 'bar', label: {
      //         normal: {
      //           show: true,//开启显示
      //           position: 'top',//柱形上方
      //           textStyle: { //数值样式
      //             color: 'rgba(0,0,0,0.95)'
      //           }
      //         }
      //       }
      //     }, {
      //       type: 'bar', label: {
      //         normal: {
      //           show: true,//开启显示
      //           position: 'top',//柱形上方
      //           textStyle: { //数值样式
      //             color: 'rgba(0,0,0,0.95)'
      //           }
      //         }
      //       }
      //     }, {
      //       type: 'bar', label: {
      //         normal: {
      //           show: true,//开启显示
      //           position: 'top',//柱形上方
      //           textStyle: { //数值样式
      //             color: 'rgba(0,0,0,0.95)'
      //           }
      //         }
      //       }
      //     }
      //   ]
      // };
      // console.log(option)
      // myChart.setOption(option);
    },
    majorFunnelInit() {
      let majorData = this.totalData.专技人才;
      let majorArray = [];
      majorArray.push(this.getValueOrDefault(majorData["正高级"], 0));
      majorArray.push(this.getValueOrDefault(majorData["副高级"], 0));
      majorArray.push(this.getValueOrDefault(majorData["中级"], 0));
      majorArray.push(this.getValueOrDefault(majorData["初级"], 0));
      majorArray.sort(function (a, b) {
        return a - b
      })
      let total = majorArray.reduce((sum, current) => {
        return sum + Number(current || 0)
      }, 0);
      var myChart = echarts.init(document.getElementById('majorFunnel'))
      var option = {
        // title: {
        //   text: '人员结构-专业技术职务',
        //   left: 'center'
        // },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            if (total === 0) {
              return params.seriesName + ' <br/>' + params.name + '：' + '0%';
            }else {
              return params.seriesName + ' <br/>' + params.name + '：' + (params.data.num * 100 / total).toFixed(2) + '%'
            }
          }
        },
        legend: {
          bottom: '5%',
          left: 'center',
          formatter: function (name) {
            return name.toString().split("(")[0];//自定义图例
          }
          //data: ['展现','点击','访问','咨询','订单']
        },
        color: ['#25a0fd', '#2bcd23', '#fba101', '#29d9e9']
        ,
        series: [
          {
            name: '技术职称',
            type: 'funnel',
            top: 40,
            height: '80%',
            maxSize: '70%',
            padAngle: 2,
            sort: 'ascending',
            markLine:{
              silent:true,
            },
            label: {
              normal: {
                show: true,
                position: 'right',
                formatter: function (item) {
                  const removeParensAndNumbers = (str) => {
                    return str.replace(/\(\d+\)/g, '');
                  }
                  return `${removeParensAndNumbers(item.data.name) } ${item.data.num}人`;
                },
              },
              emphasis: {
                textStyle: {
                  fontSize: 20
                }
              }
            },
            labelLine: {
              normal: {
                lineStyle: {
                  width: 1,
                  type: 'solid'
                }
              }
            },
            itemStyle: {
              normal: {
                opacity: 0.7
              }
            },
            data: [
              {value: 20, num: majorArray[0], name: '正高级(' + majorArray[0] + ')'},
              {value: 40, num: majorArray[1], name: '副高级(' + majorArray[1] + ')'},
              {value: 60, num: majorArray[2], name: '中级(' + majorArray[2] + ')'},
              {value: 80, num: majorArray[3], name: '初级(' + majorArray[3] + ')'}
            ]
          }
        ]
      };
      myChart.setOption(option);
      if (this.majorIndex == 0) {
        //图例点击事件
        myChart.on('legendselectchanged', (params) => {
          var node = myChart.getOption().series[0].data.find(item => item.name === params.name);
          this.$emit('click-major', node)
          //将默认点击事件中取消选中的legend动态设置回来
          myChart.setOption({
            legend: {selected: {[params.name]: true}}
          })
        })
        this.majorIndex++;
      }
    },
    technologyBarInit() {
      let technologyData = this.totalData.技能人才;
      let technologyArray = ['技能人才'];
      technologyArray.push(this.getValueOrDefault(technologyData["高级技师"], 0));
      technologyArray.push(this.getValueOrDefault(technologyData["技师"], 0));
      technologyArray.push(this.getValueOrDefault(technologyData["高级工"], 0));
      technologyArray.push(this.getValueOrDefault(technologyData["中级工"], 0));
      technologyArray.push(this.getValueOrDefault(technologyData["初级工"], 0));
      var myChart = echarts.init(document.getElementById('technologyBar'))
      var option = {
        // title: {
        //   text: '人员结构-技能人才',
        //   left: 'center'
        // },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          bottom: '5%',
          left: 'center',
        },
        dataset: {
          source: [
            ['product', '高级技师', '技师', '高级工', '中级工', '初级工'],
            technologyArray,
          ]
        },
        xAxis: {
          type: 'category',
          show: false
        },
        yAxis: {},
        series: [
          {
            type: 'bar',
            barWidth: 16,
            barGap: 4,
            label: {
              normal: {
                show: true,//开启显示
                position: 'top',//柱形上方
                textStyle: { //数值样式
                  color: 'rgba(0,0,0,0.95)'
                }
              }
            }
          }, {
            type: 'bar',barWidth: 16,
            label: {
              normal: {
                show: true,//开启显示
                position: 'top',//柱形上方
                textStyle: { //数值样式
                  color: 'rgba(0,0,0,0.95)'
                }
              }
            }
          }, {
            type: 'bar',
            barWidth: 16,
            label: {
              normal: {
                show: true,//开启显示
                position: 'top',//柱形上方
                textStyle: { //数值样式
                  color: 'rgba(0,0,0,0.95)'
                }
              }
            }
          }, {
            type: 'bar',
            barWidth: 16,
            label: {
              normal: {
                show: true,//开启显示
                position: 'top',//柱形上方
                textStyle: { //数值样式
                  color: 'rgba(0,0,0,0.95)'
                }
              }
            }
          }, {
            type: 'bar',
            barWidth: 16,
            label: {
              normal: {
                show: true,//开启显示
                position: 'top',//柱形上方
                textStyle: { //数值样式
                  color: 'rgba(0,0,0,0.95)'
                }
              }
            }
          }
        ]
      };
      console.log(option)
      myChart.setOption(option);
      if (this.technologyIndex == 0) {
        //图例点击事件
        myChart.on('legendselectchanged', (params) => {
          var node = myChart.getOption().dataset[0].source[0].find(item => item === params.name);
          this.$emit('click-technology', node)
          //将默认点击事件中取消选中的legend动态设置回来
          myChart.setOption({
            legend: {selected: {[params.name]: true}}
          })
        })
        this.technologyIndex++;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.wb-salary {
  &.card{
    box-shadow: none;
    padding: 0;
    &::before{
      height: 0;
    }
  }
  .body {
    padding: 15px 0;
  }

  .wb-item {
    flex: 1;
    flex-shrink: 0;
  }

  .echart {
    position: relative;
    flex: 1;
    display: flex;
    justify-content: center;
    column-gap: 20px;
    #eduBar {
      width: 100%;
      height: 500px;
      margin: 0 auto;
    }

    #majorFunnel {
      width: 100%;
      height: 500px;
      margin: 0 auto;
    }

    #technologyBar {
      width: 100%;
      height: 500px;
      margin: 0 auto;
    }

    .empty-text {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 0;
      color: $--color-text-secondary;
      transform: translate(-50%, -50%);
    }
  }
}
</style>
